<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="477"/>
<h1>14-ES5/ES6</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/5/7 13:46</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2019/9/11 11:40</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">ES Next</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">ES5严格模式</span></div><div style="margin-left: 40px;"><div><span style="font-size: 12pt;"> </span></div><div><img src="00-笔记_files/what.gif" type="image/gif" data-filename="what.gif" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">除了正常运行模式，ECMAscript 5 添加了第二种运行模式：&quot;严格模式&quot;（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。</span></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;"> -消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;</span></div></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div><span style="font-size: 12pt;">　　- 消除代码运行的一些不安全之处，保证代码运行的安全；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">　　- 提高编译器效率，增加运行速度；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">　　- 为未来新版本的Javascript做好铺垫。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">&quot;严格模式&quot;体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它。</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">另一方面，同样的代码，在&quot;严格模式&quot;中，可能会有不一样的运行结果；一些在&quot;正常模式&quot;下可以运行的语句，在&quot;严格模式&quot;下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">    </span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">进入严格模式</span> <span style="letter-spacing: -0.1px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 2px; -webkit-text-stroke-width: 0px; background-color: rgb(245, 242, 240); font-size: 12pt; color: rgb(17, 17, 17);">&quot;use strict&quot;;</span></div><div><span style="font-size: 12pt;">     </span></div><div><span style="font-size: 12pt;">script标签中进入严格模式;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">                 &quot;use strict&quot;</span></div><div style="margin-left: 40px;"><div style="font-family: Monaco; font-size: 9pt; color: #333333;"><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">        console.log(&quot;已经进入严格模式&quot;);</span></div><div style="margin-left: 40px;"><div style="font-family: Monaco; font-size: 9pt; color: #333333;"><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div></div><div style="font-family: Monaco; font-size: 9pt; color: #333333;"><span style="font-family: Monaco; font-size: 12pt; color: #333333;">    &lt;/script&gt; </span></div></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">            </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt; font-weight: bold;">     严格模式行为变更：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">          1.全局变量声明时 必须加var</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">    &quot;use strict&quot;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">               </span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">    a = 10;//报错 因为 a没有被var 声明</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">     //</span><span style="font-size: 12pt; color: #ff4635; font-family: Monaco;">Uncaught ReferenceError: a is not defined</span><span style="font-size: 12pt; font-family: Monaco; color: #333333;">; 引用错误： a 没有被声明</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">                         </span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;/script&gt;</span></div></div><div><span style="font-size: 12pt;">          </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">          2.this 无法指向全局对象;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        &quot;use strict&quot;</span></div><div><span style="font-size: 12pt; font-family: Monaco;">         // console.log(&quot;已经进入严格模式&quot;);</span></div><div><span style="font-size: 12pt; font-family: Monaco;">        function a(){</span></div><div><span style="font-size: 12pt; font-family: Monaco;">            this.b = 10; //报错 ， 因为this指向了window对象;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt; font-family: Monaco;">            //</span><span style="font-size: 12pt; color: #ff4635; font-family: Monaco;">Uncaught TypeError: Cannot set property 'b' of undefined</span><span style="font-size: 12pt; font-family: Monaco;">; 类型错误 ： 不能给undefined设置属性b；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-family: Monaco; font-size: 12pt;">        }</span></div><div><span style="font-size: 12pt; font-family: Monaco;">        window.a()；</span></div><div><span style="font-size: 12pt; font-family: Monaco;">&lt;/script&gt;</span></div></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">          </span></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">3.函数内重名属性；</span></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div><span style="font-size: 12pt; font-family: Monaco;">    &quot;use strict&quot;;</span></div><div><span style="font-size: 12pt; font-family: Monaco;">    function a(b,b,c){ //报错</span></div><div><span style="font-size: 12pt; font-family: Monaco;">            console.log(b,b,c); // 正常模式下 2,2,3</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-family: Monaco; font-size: 12pt;">            //</span> <span style="font-family: Monaco; font-size: 12pt; color: #ff0000;">Uncaught SyntaxError: Duplicate parameter name not allowed in this context</span> <span style="font-family: Monaco; font-size: 12pt;">  ;语法错误：在此上下文中不允许重复的参数名称</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-family: Monaco; font-size: 12pt;">    }</span></div><div><span style="font-family: Monaco; font-size: 12pt;">    a(1,2,3)</span></div><div><span style="font-family: Monaco; font-size: 12pt;">&lt;/script&gt;</span></div></div></div><div style="margin-left: 40px;"><div><span style="font-size: 12pt;">     </span></div></div><div style="margin-left: 40px;"><div><br clear="none" style="font-size: 12pt;"/></div></div><div><span style="font-size: 12pt;">         </span></div><div><span style="font-size: 12pt;">          4.arguments对象;</span></div><div><span style="font-size: 12pt;">          </span></div><div><span style="font-size: 12pt;">              4.1 arguments对象不允许被动态改变;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">    function fn1(a) {</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        a = 2;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        return [a, arguments[0]];</span></div><div><span style="font-family: Monaco; font-size: 12pt;">    }</span></div><div><span style="font-family: Monaco; font-size: 12pt;">    console.log(fn1(1)); // 正常模式为[2,2]</span></div><div><span style="font-size: 12pt; font-family: Monaco;">    function fn2(a) {</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        &quot;use strict&quot;;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        a = 2;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">        return [a, arguments[0]];</span></div><div><span style="font-family: Monaco; font-size: 12pt;">    }</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">    console.log(fn2(1)); // 严格模式为[2,1]</span></div><div><span style="font-family: Monaco; font-size: 12pt;">&lt;/script&gt;</span></div></div><div><span style="font-size: 12pt;">          </span></div><div><span style="font-size: 12pt;"> </span></div><div><span style="font-size: 12pt;">      <font color="#797979"> 4.2 arguments对象不允许被自调用;</font></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco;"><font color="#797979">&lt;script&gt;</font></span></div><div><span style="font-family: Monaco; font-size: 12pt;"><font color="#797979">        &quot;use strict&quot;;</font></span></div><div><span style="font-family: Monaco; font-size: 12pt;"><font color="#797979">        var f = function() { return arguments.callee; };</font></span></div><div><span style="font-family: Monaco; font-size: 12pt;"><font color="#797979">        f(); // 报错</font></span></div><div><font color="#797979"><br clear="none" style="font-size: 12pt;"/></font></div><div><font color="#797979"><span style="font-size: 12pt; font-family: Monaco;">        //</span><span style="font-size: 12pt; font-family: Monaco;">Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them</span></font></div><div><font color="#797979"><br clear="none" style="font-size: 12pt;"/></font></div><div><font color="#797979"><span style="font-size: 12pt; font-family: Monaco;">        //类型错误：“</span><span style="font-size: 12pt; font-family: Monaco;">caller</span> <span style="font-size: 12pt; font-family: Monaco;">”，“</span><span style="font-size: 12pt; font-family: Monaco;">arguments.</span><span style="font-size: 12pt; font-family: Monaco;">callee</span> <span style="font-size: 12pt; font-family: Monaco;">”，不能在严格模式中使用;</span></font></div><div><font color="#797979"><br clear="none" style="font-size: 12pt;"/></font></div><div><span style="font-size: 12pt; font-family: Monaco;"><font color="#797979">        //caller返回调用当前函数的函数的引用  （正在执行的函数的属性）</font></span></div><div><font color="#797979"><span style="font-family: Monaco; font-size: 12pt;">       </span><span style="font-family: Monaco; font-size: 12pt;">//</span> <span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 12pt;">callee返回正在执行的函数本身的引用 （arguments的属性）</span></font></div><div><font color="#797979"><br clear="none" style="font-size: 12pt;"/></font></div><div><span style="font-size: 12pt; font-family: Monaco;"><font color="#797979">&lt;/script&gt;</font></span></div></div><div><span style="font-size: 12pt;">             </span><span style="font-size: 12pt;">  </span></div><ol><li><div><span style="font-size: 12pt;">新增保留字； implements, interface, let, package, private, protected, public, static, yield。</span></div></li></ol><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;script&gt;</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&quot;use strict&quot;;</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">function package(protected) { // 语法错误</span></div><div style="margin-left: 40px;"><div style="font-family: Monaco; font-size: 9pt; color: #333333;"><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">    var implements; // 语法错误</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">}</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt; font-family: Monaco; color: #333333;">package();</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: #333333;"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">&lt;/script&gt;</span></div></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;"> </span></div><div><img src="00-笔记_files/开心.gif" type="image/gif" data-filename="开心.gif" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 14pt; color: rgb(1, 1, 1);">ES5新增常见方法</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">数组：</span></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">2个索引方法：indexOf() 和 lastIndexOf()；</span></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">5个迭代方法：forEach()、map()、filter()、some()、every()；</span></div><div><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">2个归并方法：reduce()、reduceRight()；</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">字符串</span></div><div><span style="font-size: 12pt; text-indent: 28px;">    trim();// 去掉字符串前后空格</span></div><div><span style="font-size: 12pt; text-indent: 28px;">    trimLeft()</span></div><div><span style="font-size: 12pt; text-indent: 28px;">    trimRIght()</span></div><div><br/></div><div><span style="font-size: 12pt; text-indent: 28px;">    var reg = /(^\s*)|(\s*$)/g</span></div><div><span style="font-size: 12pt; text-indent: 28px;">    str.replace(reg,&quot;&quot;);</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="border-width: 0px; text-indent: 2em; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">JSON.parse(str);  //json序列化，将符合json格式的字符串转换为json</span></span></div><div><span style="border-width: 0px; text-indent: 2em; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">JSON.stringify();  //json转换为字符串</span></span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">Date.now();  //日期对象得到当前日期的毫秒数</span></span></div><div><br clear="none"/></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">Object.defineProperties(obj, props); //给obj设置属性</span></span></div><div><span style="font-size: 12pt;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">Object.keys(obj);  //获取obj的所有属性名称，返回数组</span></span></div><div><span style="font-size: 12pt;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">Object.values(obj);  // 获取obj的所有属性值，返回数组</span></span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #333333; background: none; border-radius: 0px; overflow-wrap: normal; font-weight: bold;">var</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">obj =</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #333333; background: none; border-radius: 0px; overflow-wrap: normal; font-weight: bold;">new</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #0086b3; background: none; border-radius: 0px; overflow-wrap: normal;">Object</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">();</span></span></div><div><br clear="none" style="font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #0086b3; background: none; border-radius: 0px; overflow-wrap: normal;">Object</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">.defineProperty(obj,</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">'name'</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">, {</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">configurable</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;">false</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal;">, <span style="color: #797979;">// <span style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">表示能否通过delete删除此属性</span></span></span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">writable</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;">true</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">,</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal;"><span style="color: #797979;">// <span style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">能否修改属性的值</span></span></span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">enumerable</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;">true</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">,</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal;"><span style="color: #797979;">// <span style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; font-size: 15px; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性</span></span></span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">value</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">'张三'</span></span></div><div><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;"><span style="font-size: 12pt;">})</span></span></div><div><br clear="none" style="font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #0086b3; background: none; border-radius: 0px; overflow-wrap: normal;">console</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">.log(obj.name)</span></span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">var</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">obj</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">=</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">new</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">Object();</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">Object.defineProperties(obj,</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">{</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;"> </span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">    name:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">{</span></span></div><div><span style="font-size: 12pt;"><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; border-radius: 0px; overflow-wrap: normal;">        value:</span> <span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; border-radius: 0px; overflow-wrap: normal;">'张三'</span><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; border-radius: 0px; overflow-wrap: normal;">,</span></span></div><div><span style="font-size: 12pt;"><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; border-radius: 0px; overflow-wrap: normal;">        configurable:</span> <span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; border-radius: 0px; overflow-wrap: normal;">false</span><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; border-radius: 0px; overflow-wrap: normal;">,</span></span></div><div><span style="font-size: 12pt;"><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; border-radius: 0px; overflow-wrap: normal;">        writable:</span> <span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; border-radius: 0px; overflow-wrap: normal;">true</span><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; border-radius: 0px; overflow-wrap: normal;">,</span></span></div><div><span style="font-size: 12pt;"><span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; border-radius: 0px; overflow-wrap: normal;">        enumerable:</span> <span style="background: none; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; border-radius: 0px; overflow-wrap: normal;">true</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">    },</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;"> </span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">    age:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">{</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">        value:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;">18</span><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">,</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; background: none; border-radius: 0px; overflow-wrap: normal; color: #333333;">        configurable:</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;">true</span></span></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">    }</span></span></div><div><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;"><span style="font-size: 12pt;">})</span></span></div><div><br clear="none" style="font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 12pt;"><span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">console.log(obj.name,</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">obj.age)</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">//</span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #dd1144; background: none; border-radius: 0px; overflow-wrap: normal;">张三,</span></span> <span style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; color: #008080; background: none; border-radius: 0px; overflow-wrap: normal;"><span style="font-size: 12pt;">18</span></span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">Object.assign  合并对象</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 24pt;"><span style="font-size: 24pt;">ES6（ECMAScript2015）</span></span></div><div><br clear="none"/></div><div><span style="font-size: 14pt; font-weight: bold;">let/const</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    块级作用域：<span style="font-size: 16px;">一种普遍存在于各个语言中的作用域范围；</span></span></div><div><span style="font-size: 12pt;"><span style="font-size: 16px;">    </span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt;"><span style="font-size: 16px; font-family: 等线; color: #333333;">     {</span></span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">          var a = 10;</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">          let b = 20;</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     }</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     </span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     console.log(a)//10</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     console.log(b)// a is not defined</span></div></div><div><br clear="none"/></div><div><span style="font-size: 16px;">我们可以发现，在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: 等线; color: #333333;">  for(var  i = 0 ; i &lt; aLi.length ; i ++){</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                    aLi[i].onclick = function(){</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                              console.log(i);  //永远都是aLi.length</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                    }</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     }</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: 等线; color: #333333;"> for(let i = 0 ; i &lt; aLi.length ; i ++){</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                    aLi[i].onclick = function(){</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                              console.log(i);// 对应下标</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">                    }</span></div><div><span style="font-size: 16px; font-family: 等线; color: #333333;">     }</span></div></div><div><br clear="none"/></div><div><span style="font-size: 12pt;"><span style="font-size: 16px;">有了let声明我们在函数外部就无法访问到 i ，i作为下标只存在于for循环中， 所以，这个时候每个i都是独立的；我们在点击的时候可以轻易的获取当前元素的下标，而不用做很多繁琐的处理了；</span></span></div><div><br clear="none"/></div><div><br/></div><div><span style="font-size: 16px; font-family: 等线;">   </span> <span style="font-size: 16px;"> </span></div><div><span style="font-size: 16px;">     之前有提到过，JS中var声明一个变量是存在声明提升的，这是JS中的一个缺陷所在，</span> <span style="font-size: 16px; font-weight: bold;">但是现在的let不存在声明提升</span><span style="font-size: 16px;">；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     console.log(a); //undefined;</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     var a = 10;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     console.log(b)//b is not defined;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">      let b = 10;</span></div></div><div><span style="font-size: 16px;">    </span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">暂时性死区；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;"> var a = 10;</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     if(true){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">          </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">          console.log(a);//ReferenceError(引用错误): a is not defined;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">          let a = 20;</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     }</span></div></div><div><span style="font-size: 16px;">   </span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">     ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let 或者const声明的变量即为该区块绑定， 该变量不受任何变量影响。</span> <span style="font-size: 16px; color: rgb(255, 122, 116); font-weight: bold;">在该变量使用let声明前不可以用</span><span style="font-size: 16px;">。在语法上，我们叫这种情况为：暂时性死区 </span><span style="font-size: 16px; color: rgb(51, 51, 51);">(</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 16px; color: rgb(51, 51, 51);">temporal dead zone，简称 TDZ)</span></div><div><br clear="none"/></div><div><span style="font-size: 16pt;"><span style="font-size: 16pt; font-weight: bold;">const</span></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">声明常量</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: 微软雅黑;">const a = 20;</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">a = 30;    //<span style="color: #333333;">Uncaught TypeError: Assignment to constant variable.</span></span></div><div><br clear="none"/></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><div style="margin-top: 1em;margin-bottom: 1em;-en-paragraph:true;"><font style="font-size: 12pt;"><span style="font-size: 12pt; font-weight: bold;">扩展运算符  ...</span></font></div><div style="margin-top: 1em;margin-bottom: 1em;-en-paragraph:true;"><span style="font-size: 12pt;">三个点号，功能是把数组或类数组对象展开成一系列用逗号隔开的值</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var foo = function(a, b, c) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">console.log(a);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">console.log(b);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">console.log(c);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">}</span></div><div><br style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var arr = [1, 2, 3];</span></div><div><br style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//传统写法</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">foo(arr[0], arr[1], arr[2]);</span></div><div><br style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//使用扩展运算符</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">foo(...arr);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//1</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//2</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//3</span></div></div><div><br/></div><div><br/></div><h1><span style="font-size: 12pt;">rest运算符</span></h1><div style="margin-top: 1em;margin-bottom: 1em;-en-paragraph:true;"><span style="font-size: 12pt;">rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//主要用于不定参数，所以ES6开始可以不再使用arguments对象</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var </span><span style="font-family: Monaco; font-size: 12pt;">bar = function(a, ...args) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    console.log(a);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    console.log(args);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">}</span></div><div><br style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">bar(1, 2, 3, 4);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//1</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//[ 2, 3, 4 ]</span></div></div><div><br/></div><h3> </h3></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">- 字符串扩展</span></div><div><span style="font-size: 16px;">      </span></div><div><span style="font-size: 16px;">     1.</span><span style="font-size: 16px; font-weight: bold;">字符串的 Unicode 表示</span><span style="font-size: 16px;">;  规则为</span><span style="font-size: 16px; color: rgb(241, 79, 154);">\u + 四位十六进制</span><span style="font-size: 16px;">;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">        例如: console.log(&quot;\u0061&quot;);</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     打印结果是 a；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     这种新的字符表示方式只能表示  \u 0000 ~ \u ffff 之间的数字。 如果超出范围必须用双字节表示;</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">         console.log(&quot;\uD842\uDFB6&quot;); </span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px;">     打印结果是 <span style="font-size: 12pt;">𠮶</span></span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     如果不按照规则熟悉书写 例如 console.log(&quot;\uD842\uDFB6</span><span style="font-size: 16px; font-weight: bold;">9</span><span style="font-size: 16px;">&quot;) </span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">     这个9是多余字符； 那么则认为这段字符是 \uD842\uDFB6 + 9 所以打印结果是 </span><span style="font-size: 12pt;">𠮶</span><span style="font-size: 16px;">9；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     如果想要一次性表示超出范围的字符那么我们可以使用{}来表示；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     例如:</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">     console.log(&quot;\u20BB9&quot;);  这个的打印结果是 拆分开来的 ₻9</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">     console.log(&quot;\u{20BB9}&quot;); 这个打印的结果是一个完整的字符</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">     ES6支持多种格式的字符表示;</span></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-weight: bold;">     2.字符串的新增方法:</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">              </span></div><div><span style="font-size: 16px; font-weight: bold;">         2.1 repeat()重复功能</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">            'x'.repeat(3)  //xxx；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">            重复字符串;</span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px; font-weight: bold;">         2.2  includes()  startsWith() endsWith()  ;判定字符串中是否存在某个字符串;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">         </span><span style="font-size: 12pt;"> var s = 'Hello world!';</span></div><div><br clear="none"/></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">  s.startsWith('Hello') // true   以参数开头</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">  s.endsWith('!') // true            以参数结尾</span></div><div style="margin-left: 40px;"><span style="font-size: 12pt;">  s.includes('o') // true             包括参数;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          第二种方法接受第二个参数，第二个参数表示从第几位开始;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          var s = 'Hello world!';</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="margin-left: 40px;"><span style="font-size: 16px;">  s.startsWith('world', 6) // true</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">  s.endsWith('Hello', 5) // true</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">  s.includes('Hello', 6) // false</span></div><div><span style="font-size: 16px;">          </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          <span style="font-size: 16px; font-weight: bold;">3.for of </span></span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          一种新的遍历方式;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          for of 可以用于遍历字符串：</span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px;">          var s = &quot;abc&quot;;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          for(let  b of s){</span></div><div><span style="font-size: 16px;">               </span></div><div><span style="font-size: 16px;">               console.log(b) // &quot;a&quot;  &quot;b&quot;  &quot;c&quot;</span></div><div><span style="font-size: 16px;">               </span></div><div><span style="font-size: 16px;">           }</span></div><div><br clear="none"/></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px; font-weight: bold;">       字符串模板扩展：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          ES6中存在一种新的字符串， 这种字符串是 以 ` `  (波浪线上的那个字符 &gt; 反引号)括起来表示的；</span></div><div><span style="font-size: 16px;">      </span></div><div><span style="font-size: 16px;">          通常我们想要拼接一个带有标签的字符串， 是用这样的方式:</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">         </span> <span style="font-size: 16px; color: rgb(255, 122, 116);">bianliang</span> <span style="font-size: 16px;">+ &quot; &lt;strong&gt;这是一个文字&quot; +</span> <span style="font-size: 16px; color: rgb(255, 122, 116);">obj.name</span> <span style="font-size: 16px;">+ &quot;&lt;/strong&gt; &quot; +</span> <span style="font-size: 16px; color: rgb(255, 122, 116);">bianliang</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">          红色为变量;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          但是有了ES6字符串一切都变得非常简单了;</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">          `  ${bianliang} &lt;strong&gt;这是一个文字${obj.name}&lt;/strong&gt;${bianliang} `</span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px;">          用 ${ } 扩住变量让拼接变得非常容易;</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">          非常简单的换行；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          `In JavaScript \n is a line-feed.`     </span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px;">          console.log(`string text line 1</span></div><div><span style="font-size: 16px;">          string text line 2`);</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          当我们想要在字符串中使用 `反引号的时候我们需要进行转义；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          `\`Yo\` World!`    //&quot;`Yo` World!&quot;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px;">          模板还可以调用函数；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          function fn() {</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">    return &quot;Hello World&quot;;</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">  }</span></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px;">  `foo ${fn()} bar`</span></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;"><span style="font-size: 16px; font-weight: bold;">- 正则扩展</span>   </span></div><div><span style="font-size: 16px;">          </span></div><div><span style="font-size: 16px; font-weight: bold;">          1.u</span></div><div><span style="font-size: 16px;">          ES6对正则表达式添加了u修饰符，含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符。也就是说，会正确处理四个字节的UTF-16编码。</span></div><div><span style="font-size: 16px;">     </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          /^\u{61}$/.test('a')  // false   {61}会识别成量词</span></div><div><br clear="none"/></div><div style="margin-left: 40px;"><span style="font-size: 16px;"> /^\u{61}$/u.test('a')  // true   {61}识别大括号的Unicode字符</span></div><div style="margin-left: 40px;"><br clear="none"/></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-weight: bold;">2.y (“粘连”修饰符)</span></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px;">ES6添加了y修饰符和g类似，不过y 修饰符在下次匹配的时候需要紧跟上次匹配成功之后的结果匹配，确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的含义。而g则是全局匹配，只需要剩余位置中存在匹配就可;</span></div><div style="margin-left: 40px;"><div><br clear="none"/></div></div><div style="margin-left: 40px;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">实际上，y 修饰符号隐含了头部匹配的标识 ^，</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">y修饰符的设计本意，就是让头部匹配的标识 ^ 在全局匹配中都有效。</span></span></div></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px;">exec() 方法在匹配全局对象的时候， 多次匹配会在上一次结束的地方继续匹配;</span></div><div style="margin-left: 40px;"><div style="font-size: 12pt;"><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var s = 'aaa_aa_a';</span></div><div><span style="font-family: Monaco; font-size: 16px;">var r1 = /a+/g;</span></div><div><span style="font-family: Monaco; font-size: 16px;">var r2 = /a+/y;</span></div><div><span style="font-family: Monaco; font-size: 12pt;">r1.exec(s) // [&quot;aaa&quot;]</span></div><div><span style="font-family: Monaco; font-size: 12pt;">r2.exec(s) // [&quot;aaa&quot;]</span></div><div><span style="font-family: Monaco; font-size: 12pt;">r1.exec(s) // [&quot;aa&quot;]</span></div><div><span style="font-family: Monaco; font-size: 12pt;">r2.exec(s) // null</span></div></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">=&gt;箭头函数</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">原来的写法</span></div><div><span style="font-size: 16px;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">var test = function(x){</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">    return x+2;</span></div><div style="margin-left: 40px;"><span style="font-size: 16px;">}</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">使用箭头函数： var test = x =&gt;x+2;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">          var  函数名 = 参数 =&gt; 运算规则;</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">看起很简单吧？</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">省略了function、return关键字和大括号。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">  使用方法跟以前一样没区别 test(5); </span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">结果： 7</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">还有好处就是，自动绑定this</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var obj = {    </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">left : 200,    </span></div><div style="margin-left: 40px;"><div style="font-size: 12pt; font-family: Monaco; color: #333333;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">move : function(){         </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">setTimeout(function(){            </span></div><div style="margin-left: 40px;"><div style="font-size: 12pt; font-family: Monaco; color: #333333;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">  //this.left = 100;              </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">  //以前这里不能写this，这的this指window      </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">  },1000);  </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">      }</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">}</span></div></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">使用了箭头函数：</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var obj = {    </span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">left : 200,    </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">move : function(){         </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">setTimeout( ()=&gt;{          </span></div><div style="margin-left: 40px;"><div style="font-size: 12pt; font-family: Monaco; color: #333333;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">   this.left = 100;      </span></div><div style="margin-left: 40px;"><div style="font-size: 12pt; font-family: Monaco; color: #333333;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">     },1000);    </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">} }</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div>     <span style="font-size: 12pt;">箭头函数this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为这个，所以箭头函数也不能做构造函数。</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px;">当然也有一些缺陷</span></div><div><span style="font-size: 16px;"> </span></div><div><span style="font-size: 16px;">第一： 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">第二： 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=&gt;({id:3, val=20})</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">箭头函数现在非常流行，但是</span><span style="font-size: 16px;">，</span><span style="font-size: 16px; color: rgb(255, 122, 116);">这样的设计对代码的可读性有一定的伤害</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">- 解构赋值</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var [a,b,c] = [1,2,3];</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var {a,b,c} = {</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    a:1,</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    b:2,</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    c:3</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">}</span></div><div><br/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var username = &quot;zhangsan&quot;;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var age = 18;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var obj = {username,age};</span></div><div><span style="font-size: 12pt; color: rgb(51, 51, 51); font-family: Monaco;"><br/></span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">- Symbol类型</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">第六种基本数据类型Symbol</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">var s1 = Symbol();</span></div><div><span style="font-size: 16px;">var s2 = Symbol();</span></div><div><span style="font-size: 16px;">var s3 = Symbol(&quot;abc&quot;);</span></div><div><span style="font-size: 16px;">var s4 = Symbol(&quot;abc&quot;);</span></div><div><span style="font-size: 16px;">s1不等于s2</span></div><div><span style="font-size: 16px;">s3不等于s4</span></div><div><span style="font-size: 16px;">     </span></div><div><span style="font-size: 16px;">Symbol函数会生成一个唯一的值可以理解为Symbol类型跟字符串是接近的 但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要 这对于一些字典变量，比较有用</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">const TYPE = {    </span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">SMALL: Symbol(),  </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">MIDDLE: Symbol(), </span></div><div style="margin-left: 40px;"><span style="font-size: 16px; font-family: Monaco; color: #333333;">LARGE: Symbol()</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">}</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">//以前我们可能会把SMALL、MIDDLE、LARGE赋值为数字或字符串</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">//还要确保它们的值不能发生重复，但现在不用担心了</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">function Create(type){   </span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">          switch(type){       </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">                case TYPE.SMALL:  {console.log(&quot;SMALL&quot;)}  break;       </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">                case TYPE.MIDDLE: {console.log(&quot;MIDDLE&quot;)}  break;               </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">                case TYPE.LARGE:  {console.log(&quot;LARGE&quot;)}  break;     </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">            }</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">        }</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var s = Create(TYPE.MIDDLE);</span></div><div><br clear="none"/></div></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(26, 173, 224);">案例：点击div切换四种颜色</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">- Set和Map结构</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">想当初设计JS的时候，由于有SUN公司人员的参与 再加上当时如日中天的JAVA及其优秀</span><span style="font-size: 16px;">的设计，才使得JS语法及内存设计跟JAVA会如此的接近。</span><span style="font-size: 16px;">但JAVA很多优秀的内容，JS不知道为了什么目的并没有引入，例如Set和Map集合</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">Set集合，本质上就是对数组的一种包装 例如：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">let imgs = new Set();</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(1）;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(1）;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(5）;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(&quot;5&quot;）;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(new String(&quot;abc&quot;)）;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">imgs.add(new String(&quot;abc&quot;)）;</span></div><div><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">// 打印的结果： 1  5  '5'  'abc'  'abc'</span></div></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">Set集合是默认去重复的，但前提是两个添加的元素严格相等 所以5和&quot;5&quot;不相等，两个new出来的字符串不相等</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">关于遍历的方法 由于Set集合本质上还是一个map，因此会有以下几种奇怪的遍历方法</span></div><div><span style="font-size: 16px;"> </span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">var imgs = new Set(['a','b','c']); </span></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;"> <span style="font-size: 16px; font-family: Monaco; color: #333333;">//根据KEY遍历</span></span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">for(let item of imgs.keys()){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    console.log(item);</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">} //a //b //c</span></div></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">//根据VALUE遍历</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">for(let item of imgs.values()){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    console.log(item);</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">} //a //b //c</span></div></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">//根据KEY-VALUE遍历</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">for(let item of imgs.entries()){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    console.log(item);</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;"> </span><span style="font-size: 16px; font-family: Monaco; color: #333333;">} //['a','a'] //['b','b'] //['c','c']</span></div></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: #333333;"><span style="font-size: 12pt; font-family: 微软雅黑;">//普通for...of循环(for...of跟for-in的区别很明显，就是直接取值，而不再取下标了)</span></span></div><div><span style="color: #333333;"><span style="font-size: 12pt; font-family: 微软雅黑;">for(let item of imgs){  </span></span></div><div><span style="color: #333333;"><span style="font-size: 12pt; font-family: 微软雅黑;">  console.log(item);</span></span></div><div><span style="color: #333333;"><span style="font-size: 12pt; font-family: 微软雅黑;">} //a //b //c</span></span></div></div><div><br clear="none"/></div><div><span style="font-size: 16px;">SET集合没有提供下标方式的访问，因此只能使用for来遍历。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">// 下面展示了一种极为精巧的数组去重的方法</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">var newarr = [...new Set(array)];</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">解释：</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">Map集合,即映射</span></div><div><span style="font-size: 16px;"> </span></div><div><span style="font-size: 16px;">let map = new Map();</span></div><div><span style="font-size: 16px;"> </span></div><div><span style="font-size: 16px;">map.set(&quot;S230&quot;, &quot;张三&quot;);</span></div><div><span style="font-size: 16px;">map.set(&quot;S231&quot;, &quot;李四&quot;);</span></div><div><span style="font-size: 16px;">map.set(&quot;S232&quot;, &quot;王五&quot;);</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">获取某一个元素 map.get(&quot;s232&quot;); //王五</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">//循环遍历，配合解构赋值 for(let [key,value] of map){    console.log(key,value);  }</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-weight: bold;">- 了解class的写法 语法糖</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">Class保留字终于成了关键字</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">终于，我们在有生之年等到class出现了 这下，JS看起来更像一个标准的面相对象的语言了</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">以前编写一个构造函数（类）</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">function Pad(color){</span></div><div><span style="font-size: 16px;">    this.color = color;</span></div><div><span style="font-size: 16px;">}</span></div><div><span style="font-size: 16px;">现在的写法跟Java更接近了</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">class Iphone{</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    constructor(color, size){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">            this.color = color;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">            this.size = size;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">     }    </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">playgame(){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">           //.............</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">}    </span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">toString(){</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">          return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">    }</span></div><div><span style="font-size: 16px; font-family: Monaco; color: #333333;">}</span></div></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">我们定义了一个类，名字叫Iphone 通过类生成一个实例： var iphone = new Iphone(&quot;白色&quot;, 5);</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">要注意的是，使用了class来定义类，必须先定义再使用</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div></div><div><br clear="none"/></div></span>
</div></body></html> 